<template>
	<!-- 用户登录状态 -->
	<view class="userTop">
		<u-avatar :src="userMessage.avatar" shape="circle" mode="aspectFill" size="90" @click="userOperationSetting"></u-avatar>
		<view class="userName" v-if="token!==null && token!==''">{{userMessage.name}}
		</view>
		<view class="userName" v-else><button class="loginBtn" @tap="toLogin">登录</button></view>
	
	<u-overlay :show="toUserSettingPage" mask-click-able="false">
		<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
	</u-overlay>
	</view>
	
	
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		mapMutations
	} from 'vuex'
	export default {
		name: "userLoginStatus",
		data() {
			return {
				userMessage: {
					name: "",
					avatar: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
				},
				agreeLogin: false,
				toUserSettingPage:false
			};
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo']),
			userOperationSetting() {
				// 防止点击太多下设置页面
				this.toUserSettingPage=true
				if (this.token !== '') {
					uni.navigateTo({
						url: "/subpkg/userOperationSetting/userOperationSetting"
					});
					this.toUserSettingPage=false
				} else if (this.token == '' || this.token == null) {
					uni.navigateTo({
						url: "/subpkg/loginPage/loginPage"
					});
					this.toUserSettingPage=false
				}
			},
			toLogin() {
				uni.navigateTo({
					url: "/subpkg/loginPage/loginPage"
				});
			},
			 toGetUserInfo(){
				if (this.token !== "" && this.token !== null) {
					// 得到用户数据
					//如果登录了发起请求获取userInfo
					this.userMessage.avatar = this.userInfo.data.data.avatar
					this.userMessage.name = this.userInfo.data.data.name
				}
			}
		},
		 beforeMount() {
			this.toGetUserInfo()
		},
	   	beforeUpdate() {
			//跳转回来后更新userInfo
			if (this.token !== "" && this.token !== null ) {
				this.toGetUserInfo()
			}
		},
		computed: {
			...mapState('m_user', ['token', 'userInfo']),
		},
		watch:{
			token:{
				handler(newVal,oldVal){
					if(newVal==''){
						this.userMessage={
					name: "",
					avatar: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
				}
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userTop {
		height: 250rpx;
		display: flex;
		align-items: center;
		padding-left: 20px;

		.userName {
			margin-left: 20px;
			float: right;
			font-size: 40rpx;
		}

		.loginBtn {
			background-color: #058e73;
			color: #f4f4f4;
		}
	}
</style>